<template>
  <div class="toast-container" v-if="toasts.length > 0">
    <TransitionGroup name="toast" tag="div" class="toast-list">
      <div
        v-for="toast in toasts"
        :key="toast.id"
        class="toast"
        :class="toast.type"
        @click="removeToast(toast.id)"
      >
        <div class="toast-icon">
          <CheckIcon v-if="toast.type === 'success'" :size="16" />
          <XIcon v-else-if="toast.type === 'error'" :size="16" />
          <InfoIcon v-else :size="16" />
        </div>
        <div class="toast-content">
          <div class="toast-title">{{ toast.title }}</div>
          <div class="toast-message" v-if="toast.message">{{ toast.message }}</div>
        </div>
        <button class="toast-close" @click.stop="removeToast(toast.id)">
          <XIcon :size="14" />
        </button>
        <div class="toast-progress" :style="{ width: toast.progress + '%' }"></div>
      </div>
    </TransitionGroup>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'
import { CheckIcon, XIcon, InfoIcon } from './icons'

export default {
  name: 'Toast',
  components: {
    CheckIcon,
    XIcon,
    InfoIcon,
  },
  setup() {
    const toasts = ref([])
    let toastId = 0

    const addToast = options => {
      const id = ++toastId
      const toast = {
        id,
        title: options.title || '提示',
        message: options.message || '',
        type: options.type || 'info',
        duration: options.duration || 3000,
        progress: 100,
      }

      toasts.value.push(toast)

      // 自动移除
      if (toast.duration > 0) {
        const startTime = Date.now()
        const progressInterval = setInterval(() => {
          const elapsed = Date.now() - startTime
          const remaining = Math.max(0, toast.duration - elapsed)
          toast.progress = (remaining / toast.duration) * 100

          if (remaining <= 0) {
            clearInterval(progressInterval)
            removeToast(id)
          }
        }, 10)
      }

      return id
    }

    const removeToast = id => {
      const index = toasts.value.findIndex(toast => toast.id === id)
      if (index > -1) {
        toasts.value.splice(index, 1)
      }
    }

    const clearAll = () => {
      toasts.value = []
    }

    // 暴露方法给全局使用
    const showSuccess = (title, message = '') => {
      return addToast({ title, message, type: 'success' })
    }

    const showError = (title, message = '') => {
      return addToast({ title, message, type: 'error' })
    }

    const showInfo = (title, message = '') => {
      return addToast({ title, message, type: 'info' })
    }

    // 将方法挂载到全局
    if (typeof window !== 'undefined') {
      window.$toast = {
        showSuccess,
        showError,
        showInfo,
        addToast,
        removeToast,
        clearAll,
      }
    }

    return {
      toasts,
      addToast,
      removeToast,
      clearAll,
      showSuccess,
      showError,
      showInfo,
    }
  },
}
</script>

<style scoped>
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  pointer-events: none;
}

.toast-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: auto;
}

.toast {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
  min-width: 320px;
  max-width: 480px;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid #f0f0f0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toast:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 6px 20px rgba(0, 0, 0, 0.1);
}

.toast.success {
  border-left: 4px solid #52c41a;
  background: linear-gradient(135deg, #f6ffed 0%, #f0f9ff 100%);
}

.toast.error {
  border-left: 4px solid #ff4d4f;
  background: linear-gradient(135deg, #fff2f0 0%, #fff1f0 100%);
}

.toast.info {
  border-left: 4px solid #1890ff;
  background: linear-gradient(135deg, #f0f9ff 0%, #f0f8ff 100%);
}

.toast-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-top: 2px;
}

.toast.success .toast-icon {
  background: #52c41a;
  color: white;
}

.toast.error .toast-icon {
  background: #ff4d4f;
  color: white;
}

.toast.info .toast-icon {
  background: #1890ff;
  color: white;
}

.toast-content {
  flex: 1;
  min-width: 0;
}

.toast-title {
  font-size: 14px;
  font-weight: 600;
  color: #262626;
  margin-bottom: 4px;
  line-height: 1.4;
}

.toast-message {
  font-size: 13px;
  color: #595959;
  line-height: 1.4;
}

.toast-close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  color: #8c8c8c;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 2px;
}

.toast-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #262626;
}

.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #1890ff, #40a9ff);
  transition: width 0.1s linear;
}

.toast.success .toast-progress {
  background: linear-gradient(90deg, #52c41a, #73d13d);
}

.toast.error .toast-progress {
  background: linear-gradient(90deg, #ff4d4f, #ff7875);
}

/* 动画效果 */
.toast-enter-active,
.toast-leave-active {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.toast-enter-from {
  opacity: 0;
  transform: translateX(100%) scale(0.8);
}

.toast-leave-to {
  opacity: 0;
  transform: translateX(100%) scale(0.8);
}

.toast-move {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 768px) {
  .toast-container {
    top: 10px;
    right: 10px;
    left: 10px;
  }

  .toast {
    min-width: auto;
    max-width: none;
  }
}
</style>
